<template>
    <div class="dashboard-container">
        <my-search :fields="fieldsList" :baseNumber="3" @onSearch="searchForm" @onReset="resetForm" />
        <div class="btn">
            <!-- <el-button type="info" plain size="mini">新增</el-button>
            <el-button type="info" plain size="mini">删除</el-button> -->

        </div>
        <div class="table-list">
            <!-- <my-table v-loading="loading" ref="myEltable" style="width: 100%" row-key="id" :showsummary="false" :columns="showTable?tableColumns:tableColumnsa" :tableData="tableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="total" :height="$store.state.app.windowHeight - 170" max-height="660px" :current="true" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row /> -->
            <el-table v-loading="loading" :data="tableDatas" style="width: 100%" border :stripe="stripe" :height="$store.state.app.windowHeight - 170">
                <el-table-column type="index" label="序号" width="60" align="center" :index="currIndex"> </el-table-column>
                <el-table-column v-for="(item,key) in tableColumns" :prop="item.prop" :key="key" :label="item.label" align="center" :width="item.width">
                </el-table-column>

            </el-table>
        </div>
    </div>
</template>

<script>

import { queryQyjymxfx } from '@/api/cxtj/qyjymxfx'
import {
    queryDetailList
} from '@/api/cxtj/zdsygl'
export default {
    name: 'qyjymxfx',

    data() {
        return {
            loading: false,
            showTable: false,
            fieldsList: [
                {
                    label: '纳税人名称',
                    field: 'qymc',
                    type: 'autocomplete',
                    value: '',
                    options: []
                },

                {
                    label: '纳税人识别号',
                    field: 'nsrsbh',
                    type: 'text',
                    value: ''
                },
                {
                    label: '年度',
                    field: 'date',
                    type: 'yearrange', // daterange
                    value: [],
                    options: [
                        {
                            field: 'ksnd',
                            value: ''
                        },
                        {
                            field: 'jsnd',
                            value: ''
                        }
                    ],
                    change: value => {
                        // this.changxm(value);
                    }
                },


            ],
            //右侧表格开始
            tableColumns: [
                {
                    label: '项目',
                    prop: 'xmmc',
                    align: 'center',

                }
            ],
            tableColumnsa: [
                {
                    label: '项目',
                    prop: 'xmmc',
                    align: 'center',

                }
            ],
            tableDatas: []
            , queryObj: {
                qymc: '', //公司名称
                nsrsbh: '',
                date: [],
                ksnd: '',
                jsnd: '',

                pageNo: 1,
                pageSize: 20
            },
            total: 0,
            searchTxt: ''
        }
    },
    watch: {
        tableColumns(v, v1) {
            this.showTable = true
        },
        fieldsList: {
            handler(newOption, oldOption) {
                this.searchTxt = newOption[0].value
            },
            deep: true
        },
        searchTxt(newOption, oldOption) {
            console.log('1', newOption, oldOption)
            this.getQueryDetailList(newOption)
        }
    },

    mounted() {
    },
    methods: {
        getQueryDetailList(nsrmc) {
            queryDetailList({ nsrmc: nsrmc }).then(res => {
                if (res.code == 200) {
                    this.fieldsList[0].options = res.data.records.map(item => {
                        return { value: item.NSRMC, label: item.NSRMC }
                    })
                }
                console.log(this.fieldsList[0].options)
            })
        },
        searchForm(params) {

            console.log(params, '查询条件');
            this.queryObj.qymc = params.qymc || '';
            this.queryObj.nsrsbh = params.nsrsbh || '';
            this.queryObj.ksnd = params.date[0] || '';
            this.queryObj.jsnd = params.date[1] || '';


            this.getTableData();
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else {
                    this.queryObj[key] = '';
                }
            }
            this.tableDatas = []
            // this.getTableData();
        },
        getTableData() {


            if (this.queryObj.qymc == '') {
                this.$message.error('请输入纳税人名称！')
                return false
            }

            if (this.queryObj.ksnd == '' && this.queryObj.jsnd == '') {
                this.$message.error('年度不能为空')
                return false
            }

            this.loading = true
            let params = {
                qymc: this.queryObj.qymc,
                ksnd: this.queryObj.ksnd,
                jsnd: this.queryObj.jsnd,
                nsrsbh: this.queryObj.nsrsbh,
                pageNum: this.queryObj.pageNo,
                pageSize: this.queryObj.pageSize,
            }
            queryQyjymxfx(params).then(res => {
                this.loading = false
                if (res.code == 200) {
                    this.tableColumns = [
                        {
                            label: '项目',
                            prop: 'xmmc',
                            align: 'center',
                            width: 200
                        }
                    ]
                    for (let i = this.queryObj.ksnd; i <= this.queryObj.jsnd; i++) {
                        this.tableColumns.push({
                            label: i + '',
                            prop: i + '',
                            align: 'center',
                        })
                    }
                    console.log(this.tableColumns)
                    this.tableDatas = res.data
                }
                console.log(res)
            })
        },
        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
        currIndex(index) {
            return index + 1;
        },
    }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 8px;
    .btn {
        padding: 8px 8px 8px 0;
    }
}
</style>
